<template>
  <div id="home">
    <div id="slide">
      <mt-swipe :auto="2500">
        <mt-swipe-item @click.native="sliGoto(0)"><img src="../assets/swip01.png"></mt-swipe-item>
        <mt-swipe-item @click.native="sliGoto(1)"><img src="../assets/swip02.png"></mt-swipe-item>
        <mt-swipe-item @click.native="sliGoto(2)"><img src="../assets/swip03.png"></mt-swipe-item>
      </mt-swipe>
    </div>
    <div id="hot">
      <p>游戏专题</p>
      <img v-for="(i,index) in hotImg" class="img-circle" :src="i" @click="hotGoto(index)">
    </div>
    <div id="main">
      <div class="title">
        <h1>更多活动</h1>
      </div>
      <div class="game">
        <img v-for="(i,index) in heroImg" :src="i" @click="test(index)">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
      hotImg:[
        "../src/assets/homePic02.png",
        "../src/assets/homePic02-2.png",
        "../src/assets/homePic02-3.png"
      ],
      heroImg:[
        "../src/assets/homePic01.png",
        "../src/assets/homePic01.png",
        "../src/assets/homePic01.png",
        "../src/assets/homePic01.png",
        "../src/assets/homePic01.png",
        "../src/assets/homePic01.png",
      ]
    }
  },
  methods: {
    test(index){
      console.log(index);
    },
    hotGoto(i){
      console.log(i);
    },
    sliGoto(i){
      console.log(i);
    }
            
        }
 
}
</script>

<style>
#home{

  padding-top: 12%;
padding-bottom:15%;
  background: url("../assets/homeBg.png") no-repeat;
  background-size: 100%
}
  /*slide轮播图*/
#slide{
  width:95%;
  
  height:500px;
  margin-left:auto;
  margin-right:auto;
  
  margin-bottom:6%;
  border: 3px #22c7d6 solid;
} 

/*热门*/
#hot{
  width:100%;
  background-color: #2c46a5;
  height:auto;
}
#hot img{
  width:20%;
  margin-top:2%;
  margin-bottom:3%;
  margin-left:3%;
  margin-right:3%; 
}

/*主体*/
#main .title{
  margin-top: 10%;
  margin-bottom:3%;
}
#main .title h1{
  font-size: 350%;
  color:white
}

#main .game img{
  width: 25%;
  margin-left:3%;
  margin-right:3%;
  margin-bottom:5%;
}
#hot p{
  padding-top: 2%;
  font-size: 350%;
  color: #ccc
  
}
</style>
